<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EaselJS Example: Animation sequences & sprite sheets</title>

	<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

	<script>
	var canvas;
	var stage;

	var img = new Image();
	var bmpAnimList;

	function init() {
		//find canvas and load images, wait for last image to load
		canvas = document.getElementById("testCanvas");

		// create a new stage and point it at our canvas:
		stage = new createjs.Stage(canvas);

		img = new Image();
		img.src = "assets/testSeq.png";
		img.onload = handleImageLoad;
	}

	function handleImageLoad(event) {
		// grab canvas width and height for later calculations:
		var w = canvas.width;
		var h = canvas.height;

		// create spritesheet and assign the associated data.
		var spriteSheet  = new createjs.SpriteSheet({
			images: [img],
			frames: {width:64, height:68, regX:32, regY:34},
			animations: {
				walkUpRt:[0,19,"walkRt"],
				walkDnRt:[20,39,"walkUpRt"],
				walkRt:[41,59,"walkDnRt"]
			}
		});

		// to save file size, the loaded sprite sheet only includes right facing animations
		// we could flip the display objects with scaleX=-1, but this is expensive in some browsers
		// instead, we append flipped versions of the frames to our sprite sheet
		// this adds only horizontally flipped frames:
		createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);

		// we could rewire the "next" sequences to make them work like so:
		// but instead we will use code in the angleChange function.
		/*
		spriteSheet.getAnimation("walkDnRt").next = "walkDnRt_h";
		spriteSheet.getAnimation("walkDnRt_h").next = "walkRt_h";
		spriteSheet.getAnimation("walkRt_h").next = "walkUpRt_h";
		spriteSheet.getAnimation("walkUpRt_h").next = "walkUpRt";
		*/

		// create a BitmapAnimation instance to display and play back the sprite sheet:
		var bmpAnim = new createjs.BitmapAnimation(spriteSheet);

		// start playing the first sequence:
		bmpAnim.gotoAndPlay("walkRt");		//animate

		// the callback is called each time a sequence completes:
		bmpAnim.onAnimationEnd = angleChange;

		// create a bunch of rats based on the first one, and place them on stage, and in our collection.
		var l = 50;
		bmpAnimList = [];
		for (var i=0; i<l; i++) {
			bmpAnim.name = "rat"+i;
			bmpAnim.speed = Math.random()*6+2;
			bmpAnim.direction = 90;
			bmpAnim.vX = bmpAnim.speed;
			bmpAnim.vY = 0;
			bmpAnim.x = Math.random()*(w-220)+60|0;
			bmpAnim.y = Math.random()*(h-220)+0|0;

			// have each rat start on a random frame in the "walkRt" animation:
			bmpAnim.currentAnimationFrame = Math.random()*spriteSheet.getNumFrames("walkRt")|0;
			stage.addChild(bmpAnim);
			bmpAnimList.push(bmpAnim);

			// rather than creating a brand new instance each time, and setting every property, we
			// can just clone the current one and overwrite the properties we want to change:
			if (i < l-1) { bmpAnim = bmpAnim.clone(); }
		}

		// we want to do some work before we update the canvas,
		// otherwise we could use Ticker.addListener(stage);
		createjs.Ticker.addListener(window);
	}

	//called if there is an error loading the image (usually due to a 404)
	function handleImageError(e) {
		//console.log("Error Loading Image : " + e.target.src);
	}

	function tick() {
		// move all the rats according to their vX/vY properties:
		var l = bmpAnimList.length;
		for (var i=0; i<l; i++) {
			var bmpAnim = bmpAnimList[i];
			bmpAnim.x += bmpAnim.vX;
			bmpAnim.y += bmpAnim.vY;
		}

		// update the stage:
		stage.update();
	}

	function angleChange(bmpAnim,animation) {
		//after each sequence ends update the rat's heading and adjust velocities to match
		bmpAnim.direction -= 60;
		var angle = bmpAnim.direction * (Math.PI/180);
		bmpAnim.vX = Math.sin(angle) * bmpAnim.speed;
		bmpAnim.vY = Math.cos(angle) * bmpAnim.speed;
		var nextMap = {walkRt:"walkDnRt",walkDnRt:"walkDnRt_h",walkDnRt_h:"walkRt_h",walkRt_h:"walkUpRt_h",walkUpRt_h:"walkUpRt",walkUpRt:"walkRt"};
		bmpAnim.gotoAndPlay(nextMap[animation]);
	}
	</script>
</head>

<body onload="init();">

	<header id="header" class="EaselJS">
	    <h1><span class="text-product">Easel<strong>JS</strong></span> Bitmap Animation</h1>
	    <p>Dev sample showing how to use <strong>SpriteSheet</strong>, <strong>BitmapAnimation</strong>,
	    	and <strong>SpriteSheetUtils.addFlippedFrames()</strong>.</p>
		<p>Some browsers can not load images or access pixel data when running local files, and may throw a security error or not
	    			work unless the content is running on a server.</p>
	</header>

	<div class="canvasHolder">
		<canvas id="testCanvas" width="960" height="400"></canvas>
	</div>
</body>
</html>
